import React, { Component } from 'react';
import { NavBar ,Collapse} from 'antd-mobile'
import '../../styles/Mine.scss'
import tou from '../../assets/tou.jpeg'
import photo from '../../assets/li.png'
import service from '../../api'
class Mine extends Component {
    constructor(props){
        super(props)
        this.state= {
            username:'',
        }
    }
    async componentDidMount(){
        var res = await service.users.user_info({userid:localStorage.getItem('userid')})
        if(res.data.data[0].username){
            this.setState({username:res.data.data[0].username})
        }else{

            this.setState({username:res.data.data[0].nickname})
        }
    }
    back() {
        this.props.history.go(-1)
    }
    address(){
        this.props.history.push('/address')
    }
    toset(){
        this.props.history.push('/setting')
    }
    toall(){
        this.props.history.push('/ding')
    }
    render() {
        return (
            <div className='mine'>
                <div className="fan">
                    <NavBar  onBack={()=>{this.back()}}>
                       个人中心
                    </NavBar>
                    <div className='iconfont icon-shezhi1' onClick={()=>{this.toset()}}></div>
                </div>
                <div className="tou">
                    <div className="imgbox">
                    <img src={tou} alt="" />
                    </div>
                    <div className='user'>用户名：{this.state.username}</div>
                </div>
                <div className="guan">
                    <div className='ge'>
                        <div className='iconfont icon-daifukuan'></div>
                        <div>待付款</div>
                    </div>
                    <div className='ge'>
                        <div className='iconfont icon-a-daishouhuodaidaohuo'></div>
                        <div>待收货</div>
                    </div>
                    <div className='ge'>
                        <div className='iconfont icon-evaluate-1-copy'></div>
                        <div>待评价</div>
                    </div>
                    <div className='ge' >
                        <div className='iconfont icon-fenlei'></div>
                        <div onClick={()=>{this.toall()}}>全部订单</div>
                    </div>
                </div>
                <div className="xiala">
                    <Collapse defaultActiveKey={['1']}>
                        <Collapse.Panel key='1' title='地址管理' onClick={()=>{this.address()}}>
                        </Collapse.Panel>
                        <Collapse.Panel key='2' title='我的收藏夹'>
                        </Collapse.Panel>
                        <Collapse.Panel key='3' title='关于我们'>
                        </Collapse.Panel>
                    </Collapse>
                </div>
                <div className="log">
                    <img src={photo} alt="" />
                </div>
            </div>
        );
    }
}

export default Mine;